import { Box, Typography } from '@mui/material';

import { TokenPrice } from '../../api/token/token-manager';
import NumberTool from '../../libs/number-tool';

export interface Props {
    tokenPrice: TokenPrice;
}

export const TokenPerformanceRow = (props: Props) => {
    return (
        <Box
            sx={{ background: '#13112A', mb: 3, borderRadius: '12px', p: 3 }}
            className="d-flex align-items-center justify-content-between"
        >
            <Box
                component="img"
                sx={{
                    height: 40,
                    width: 40
                }}
                alt="Icon"
                src={props.tokenPrice.icon}
            />
            <Box
                sx={{
                    width: 150,
                    marginLeft: 2
                }}
            >
                <Typography variant="body1" align="left">
                    {props.tokenPrice.symbol}
                </Typography>
                <Typography
                    variant="subtitle2"
                    sx={{ color: '#B3AFD4', fontSize: 10 }}
                    align="left"
                >
                    {props.tokenPrice.name}
                </Typography>
            </Box>
            <Box>
                <Typography variant="body1" sx={{ fontSize: 14 }}>
                    ${NumberTool.format(props.tokenPrice.price, props.tokenPrice.symbol)}
                </Typography>
            </Box>
        </Box>
    );
};
